接下來幾篇會透過實作來更深入了解 React，我們會製作一個簡易的個人網站，在這個小 side project 裡面會用到下面幾項技術：

• create-react-app
• react-router
• sass 及 css-module

開發環境布置

首先我們一樣先安裝 create-react-app，安裝完畢後，先新增整理資料夾結構，這部分可以參考前面的【Day 2】常見的 React 框架及安裝方式，有提到整理方式，整理完之後結構應該如下：

安裝 react-router-dom

這邊課程是安裝 react-router-dom 這個套件，另外有一個套件是叫 react-router ，是兩個不同的套件(害我一開始有點混亂)。react-router-dom 的核心其實也是使用 react-router，但是新增了一些元件，也有調整一些可以重複利用的功能。
安裝 react-router-dom 的指令是

npm install react-router-dom

安裝 node-sass

這邊課程是透過安裝 node-sass 這個套件來安裝 sass，安裝指令如下

npm i node-sass

安裝完 sass 後記得將原有的 css 文件改為 .sass，由於我們還要使用 css-module(create-react-app 默認支持 css-module，所以不需要安裝)，所以要改為 .module.sass。
改名完之後，我們要修改原本 App.js 的 css 檔路徑名稱，以及引入方式，記得要使用 css-module 必須使用變數名稱 import 的方式，另外也刪除原本的預設結構，修改後如下：

import React from 'react';
import logo from './logo.svg';
import styles from './App.module.scss'; //改變 import 方式和檔案名稱

function App() {
    // 刪除原本的結構，替換為新的
  return (
    <div className={styles.App}>
      My Website
    </div>
  );
}

export default App;

另外為了方便後續 css 開發，我有使用 reset-css 的樣式，將裡面的代碼貼到 index.css 檔裡面。

版面配置

這個個人網站，布局上是採取縱向的三欄式布局，分別為 header、content、footer，如下

程式碼方面如下，先設定 header、section、footer，並利用 styles 綁定好 class，完成基本的三欄布局。

import React from 'react';
import logo from './logo.svg';
import styles from './App.module.scss';

function App() {
  return (
    <div className={styles.App}>
      <header className={styles.header}>
        header
      </header>
      <section className={styles.content}>
        content
      </section>
      <footer className={styles.footer}>
        footer
      </footer>
    </div>
  );
}

export default App;

小結

這一篇主要是先做環境及版面布置，並安裝需要使用的套件，如果要參考原始碼，可以看這邊，下一篇將會使用 react-router 來做路由及頁面跳轉的運用(原本是在這篇一併整理 react-router，但發現加上程式碼之後篇幅有點太長，因此拆成兩篇)。